<template>
  <div class="body">
    <section class="searchMain">
      <div class="MainTop">
        <div class="center-block relative">
          <div class="Crumbs">
            您的位置：
            <router-link to="/home">
              首页
              <b>&gt;</b>
            </router-link>
            <a href="javascript:;">{{nowActive | crumbs}}</a>
          </div>
          <div class="indexSearchBox">
            <div class="input-group">
              <span class="input-group-btn">
                <i class="inSearchFdj dtFont dtFont-sousuo"></i>
              </span>
              <input type="text" placeholder="请输入您要查询的关键字" class="form-control" />
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">搜索</button>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="center-block">
        <div class="MainTable moveTable">
          <div class="QuaT clearfix Q_left">
            <div class="QuaTle">
              <span
                :class="nowActive==index?'active':''"
                v-for="(item,index) in type"
                @click="tab(index)"
                :key="index"
              >{{item}}</span>
            </div>
          </div>
          <!-- 表格内容区域 -->
          <div class="table m_c_table" style="height: 640px;">
            <el-table
              :show-header="false"
              :data="tableList.slice(0, 10)"
              style="width: 100%"
              class="detail-table"
            >
              <el-table-column prop="articleTitle">
                <template slot-scope="scope">
                  <router-link to="/newDetail?num=10">{{scope.row.articleTitle}}</router-link>
                </template>
              </el-table-column>
              <el-table-column
                :formatter="dateForma"
                align="right"
                prop="articleAddDate"
                width="130"
              ></el-table-column>
            </el-table>
          </div>
          <!-- 分页区域 -->
          <div class="padding-20">
            <div class="fenYe clearfix">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="tableQuery.page"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="tableQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
// 获取表格数据
import { getTableList } from "@/api/projectApproval/index";
// moment 转换时间格式的插件
import moment from "moment";
import "@/assets/css/projectApproval.css";
export default {
  data: function() {
    return {
      da: 1280977330748,
      tableList: [],
      ids: 0,
      nowActive: 1,
      type: ["最新通知", "工作动态", "公示公告", "资格考试"],
      tableQuery: {
        // 当前的页数
        page: 1,
        // 当前显示多少条
        pageSize: 2
      },
      total: 0
    };
  },
  methods: {
    tab(num) {
      this.nowActive = num;
    },
    // 获得表格数据
    getTableList() {
      getTableList().then(res => {
        // console.log(res);
        this.tableList = res.obj.rows;
        this.total = res.obj.total;
      });
    },
    // 时间转化函数
    dateForma: function(row, column) {
      var date = row[column.property];
      if (undefined == date) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
    handleSizeChange(newSize) {
      this.tableQuery.page = newSize;
      this.getTableList();
      // console.log( this.tableQuery.page);
    },
    // 左边栏第几页的数据
    handleCurrentChange(newPage) {
      // this.tableQuery.pageSize=newPage
      // this.getTableList()
    },
    // 点击进入详情页面
    goDetail(id) {
      // console.log(id);
      this.$router.push("/projectApproval/policyList/policyDetails/" + id);
    }
  },
  created() {
    this.getTableList();
  },
  mounted() {
    window.scrollTo(0, 0);
    this.nowActive = Number(this.$route.query.num) || 0;
    console.log(this.nowActive);
  },
  filters: {
    crumbs: data => {
      let n = "";
      switch (data) {
        case 0:
          n = "最新通知";
          break;
        case 1:
          n = "工作动态";
          break;
        case 2:
          n = "公示公告";
          break;
        case 3:
          n = "资格考试";
          break;
        default:
          n = "出错了";
      }
      return n;
    }
  }
};
</script>
<style scoped lang="less">
.Q_left {
  height: 48px;
  border-bottom: 1px solid #eee !important;
}
.Q_left .QuaTle {
  left: 0;
}

&.el-table {
  /deep/ .cell {
    padding-left: 0;
    padding-right: 0;
  }
}
&.el-table.detail-table {
  /deep/ td {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.Crumbs {
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px 0;
}
.searchMain .MainTop {
  padding: 0;
  > div {
    padding: 40px 0;
  }
}
</style>

